<template>
  <!-- 功能逐步完善中.... -->
  <div class="jsbos-tdt-container">
    <div
      id="jsbos-map"
      class="jsbos-map"
      style="min-width: 1200px; min-height: 600px"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    /**
     * @地图主题
     * @default 0默认彩色
     *
     * @black  1黑色
     * @indigo 2靛
     *  */
    theme: {
      type: Number,
      default: 0,
    },
    // 地图展示中心点
    centerPoint: {
      type: Array,
      default: () => ["116.40769", "39.89945"],
    },
    // 地图放大程度 最大18 最小1
    zoom: {
      type: Number,
      default: 12,
    },
    // 最小最大放大程度
    minMaxZoom: {
      type: Array,
      default: () => [1, 18],
    },
    // 初始化 地图控制
    control: {
      type: Object,
      default: () => {
        return {
          // 是否禁用拖拽
          disableDrag: false,
          // 是否禁用鼠标滚轮缩放
          disableScrollWheelZoom: false,
          // 是否禁用双击放大
          disableDoubleClickZoom: false,
          // 是否禁用键盘操作 上下左右  +-
          disableKeyboard: false,
          // 是否禁用双指下拉放大
          disablePinchToZoom: false,
          // 是否禁用双指放大
          disablePinchToZoom: false,
          // 是否禁用连续缩放效果
          disableContinuousZoom: false,
          //是否禁用鼠标惯性拖拽
          disableInertia: false,
        };
      },
    },
  },
  data() {
    return {
      Map: undefined,
    };
  },
  mounted() {
    // this.initMap();
  },
  methods: {
    // 初始化天地图
    initMap() {
      // vue项目需要先声明 T = window.T，不然后面无法获取到。
      var T = window.T;
      this.Map = new T.Map("jsbos-map"); // div的id
      // 传参中心点经纬度，以及放大程度，最小1，最大18
      this.Map.centerAndZoom(
        new T.LngLat(this.centerPoint[0], this.centerPoint[1]),
        this.zoom
      );
      //设置最大最小放大程度
      this.Map.setMinZoom(this.minMaxZoom[0]);
      this.Map.setMaxZoom(this.minMaxZoom[1]);
      //控制是否放大缩小
      this.setControl();
      //  设置主题
      this.setTheme();
      //   // 标点
      //   this.point();
    },
    // 标点
    point(data) {
      var T = window.T;
      // 点位数据
      const site = data;
      site.forEach((item) => {
        // 创建标注对象
        const marker = new T.Marker(
          new T.LngLat(item.longitude, item.latitude),
          {
            icon: new T.Icon({
              iconUrl: require("./assets/icon.png"), // 引入自定义图标位置
              iconSize: new T.Point(26, 26), // 图标大小
            }),
          }
        );
        // 向地图上添加标注
        this.Map.addOverLay(marker);
        // 点位的点击事件，展示弹窗
        this.addClickHandler(item, marker);
      });
    },
    // 点位弹窗
    addClickHandler(content, marker) {
      var T = window.T;
      const that = this;
      marker.addEventListener("click", function (e) {
        var markerInfoWin = new T.InfoWindow(); // 创建信息窗口对象
        // 弹窗模版
        /***
         *   <div class="module-title" style="color: #303133;font-size:16px;">${content.name}</div>
          <div class="module-title" style="color: #303133;font-size:16px;">${content.time}</div>
         */
        const sContent = `

          <div class="module-title" style="color: #303133;font-size:16px;">${content.address}</div>
          `;
        // 相对于点偏移的位置
        markerInfoWin.setContent(sContent, { offset: new T.Point(0, -30) });
        that.Map.openInfoWindow(markerInfoWin, e.lnglat); // 开启信息窗口
      });
    },

    // 设置主题
    setTheme(type) {
      if (type) {
        // 自定义出发方法改变主题
        if (type == "black" || type == "indigo") {
          this.Map.setStyle(type); // black  indigo
          return;
        }
      }

      // 查看当前参数
      if (this.theme == 1 || this.theme == 2) {
        this.Map.setStyle(
          this.theme == 1 ? "black" : this.theme == 2 ? "indigo" : ""
        );
      }
    },
    // 重置主题
    resetTheme() {
      this.Map.removeStyle(); // 清除皮肤样式 相当于默认样式
    },

    // 地图控制
    setControl() {
      for (let key in this.control) {
        if (this.control[key] == true) {
          this.Map[key]();
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 去掉左下角  tianditu logo
.jsbos-tdt-container >>> .tdt-control-container {
  display: none !important;
}

.jsbos-tdt-container >>> .tdt-infowindow-content-wrapper {
  border: 1px solid rgba($color: #d5d5d5, $alpha: 0.58);
  border-radius: 12px;
  box-shadow: none;
}
</style>
